<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Appearance | Select2 - The jQuery replacement for select boxes</title>
	<meta name="generator" content="GravCMS" />
	<meta name="description" content="Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results." />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" type="text/css" rel="stylesheet" />
	<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js" type="text/javascript" ></script>
	<select class="js-source-states">
		<optgroup label="Alaskan/Hawaiian Time Zone">
			<option value="AK">Alaska</option>
			<option value="HI">Hawaii</option>
		</optgroup>
		<optgroup label="Pacific Time Zone">
			<option value="CA">California</option>
			<option value="NV">Nevada</option>
			<option value="OR">Oregon</option>
			<option value="WA">Washington</option>
		</optgroup>
		<optgroup label="Mountain Time Zone">
			<option value="AZ">Arizona</option>
			<option value="CO">Colorado</option>
			<option value="ID">Idaho</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NM">New Mexico</option>
			<option value="ND">North Dakota</option>
			<option value="UT">Utah</option>
			<option value="WY">Wyoming</option>
		</optgroup>
		<optgroup label="Central Time Zone">
			<option value="AL">Alabama</option>
			<option value="AR">Arkansas</option>
			<option value="IL">Illinois</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="OK">Oklahoma</option>
			<option value="SD">South Dakota</option>
			<option value="TX">Texas</option>
			<option value="TN">Tennessee</option>
			<option value="WI">Wisconsin</option>
		</optgroup>
		<optgroup label="Eastern Time Zone">
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="IN">Indiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="OH">Ohio</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WV">West Virginia</option>
		</optgroup>
	</select>
	<script type="text/javascript">
		$(document).ready(function() {
			// Initialize "states" example
			var $states = $(".js-source-states");
			var statesOptions = $states.html();
			$states.remove();
			$(".js-states").append(statesOptions);
		});
	</script>
</head>
<body class="searchbox-hidden " style="margin: 20px 20px 20px 20px;">
<section id="body">
	<div class="padding highlightable">
		<div id="body-inner">
			<h2>Disabling a Select2 control</h2>
			<p>Select2 will respond to the <code>disabled</code> attribute on <code>&lt;select&gt;</code> elements. You can also initialize Select2 with <code>disabled: true</code> to get the same effect.</p>
			<div class="s2-example">
				<p>
					<select class="js-example-disabled js-states form-control" disabled="disabled"></select>
				</p>
				<p>
					<select class="js-example-disabled-multi js-states form-control" multiple="multiple" disabled="disabled"></select>
				</p>
				<div class="btn-group btn-group-sm" role="group" aria-label="Programmatic enabling and disabling">
					<button type="button" class="js-programmatic-enable btn btn-default">
						Enable
					</button>
					<button type="button" class="js-programmatic-disable btn btn-default">
						Disable
					</button>
				</div>
			</div>
			<pre data-fill-from=".js-code-disabled"></pre>
			<script type="text/javascript" class="js-code-disabled">
				$(".js-example-disabled").select2();
				$(".js-example-disabled-multi").select2();
				$(".js-programmatic-enable").on("click", function () {
					$(".js-example-disabled").prop("disabled", false);
					$(".js-example-disabled-multi").prop("disabled", false);
				});
				$(".js-programmatic-disable").on("click", function () {
					$(".js-example-disabled").prop("disabled", true);
					$(".js-example-disabled-multi").prop("disabled", true);
				});
			</script>
			<h2>Labels</h2>
			<p>You can, and should, use a <code>&lt;label&gt;</code> with Select2, just like any other <code>&lt;select&gt;</code> element.</p>
			<div class="s2-example">
				<p>
					<label for="id_label_single">
						Click this to focus the single select element
						<select class="js-example-basic-single js-states form-control" id="id_label_single"></select>
					</label>
				</p>
				<p>
					<label for="id_label_multiple">
						Click this to focus the multiple select element
						<select class="js-example-basic-multiple js-states form-control" id="id_label_multiple" multiple="multiple"></select>
					</label>
				</p>
			</div>
			<pre><code>&lt;label for="id_label_single"&gt;
  Click this to highlight the single select element
  &lt;select class="js-example-basic-single js-states form-control" id="id_label_single"&gt;&lt;/select&gt;
&lt;/label&gt;
&lt;label for="id_label_multiple"&gt;
  Click this to highlight the multiple select element
  &lt;select class="js-example-basic-multiple js-states form-control" id="id_label_multiple" multiple="multiple"&gt;&lt;/select&gt;
&lt;/label&gt;</code></pre>
			<script type="text/javascript">
				$.fn.select2.amd.require([
					"select2/core",
					"select2/utils"
				], function (Select2, Utils, oldMatcher) {
					var $basicSingle = $(".js-example-basic-single");
					var $basicMultiple = $(".js-example-basic-multiple");
					$.fn.select2.defaults.set("width", "100%");
					$basicSingle.select2();
					$basicMultiple.select2();
					function formatState (state) {
						if (!state.id) {
							return state.text;
						}
						var $state = $(
							'<span>' +
							'<img src="vendor/images/flags/' +
							state.element.value.toLowerCase() +
							'.png" class="img-flag" /> ' +
							state.text +
							'</span>'
						);
						return $state;
					};
				});
			</script>
			<h2>Container width</h2>
			<p>Select2 will try to match the width of the original element as closely as possible. Sometimes this isn't perfect, in which case you may manually set the <code>width</code> <a href="/configuration">configuration option</a>:</p>
			<table class="table table-striped table-bordered">
				<thead>
				<tr>
					<th>Value</th>
					<th>Description</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td><code>'element'</code></td>
					<td>
						Uses the computed element width from any applicable CSS rules.
					</td>
				</tr>
				<tr>
					<td><code>'style'</code></td>
					<td>
						Width is determined from the <code>select</code> element's <code>style</code> attribute. If no <code>style</code> attribute is found, null is returned as the width.
					</td>
				</tr>
				<tr>
					<td><code>'resolve'</code></td>
					<td>
						Uses the <code>style</code> attribute value if available, falling back to the computed element width as necessary.
					</td>
				</tr>
				<tr>
					<td><code>'&lt;value&gt;'</code></td>
					<td>
						Valid CSS values can be passed as a string (e.g. <code>width: '80%'</code>).
					</td>
				</tr>
				</tbody>
			</table>
			<h3>Example</h3>
			<p>The two Select2 boxes below are styled to <code>50%</code> and <code>75%</code> width respectively to support responsive design:</p>
			<div class="s2-example">
				<p>
					<select class="js-example-responsive js-states" style="width: 50%"></select>
				</p>
				<p>
					<select class="js-example-responsive js-states" multiple="multiple" style="width: 75%"></select>
				</p>
			</div>
			<pre><code>&lt;select class="js-example-responsive" style="width: 50%"&gt;&lt;/select&gt;
&lt;select class="js-example-responsive" multiple="multiple" style="width: 75%"&gt;&lt;/select&gt;</code></pre>
			<pre data-fill-from=".js-code-example-responsive"></pre>
			<script type="text/javascript" class="js-code-example-responsive">
				$(".js-example-responsive").select2({
					width: 'resolve' // need to override the changed default
				});
			</script>
			<h2>Themes</h2>
			<p>Select2 supports custom themes using the <code>theme</code> option so you can style Select2 to match the rest of your application.</p>
			<p>These examples use the <code>classic</code> theme, which matches the old look of Select2.</p>
			<div class="s2-example">
				<p>
					<select class="js-example-theme-single js-states form-control">
					</select>
				</p>
				<p>
					<select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select>
				</p>
			</div>
			<pre data-fill-from=".js-code-example-theme"></pre>
			<script type="text/javascript" class="js-code-example-theme">
				$(".js-example-theme-single").select2({
					theme: "classic"
				});
				$(".js-example-theme-multiple").select2({
					theme: "classic"
				});
			</script>
			<p>Various display options of the Select2 component can be changed.  You can access the <code>&lt;option&gt;</code> element (or <code>&lt;optgroup&gt;</code>) and any attributes on those elements using <code>.element</code>.</p>
			</p>
		</div>
	</div>
</section>
</body>
</html>